<!DOCTYPE html>

<html>

<head>
  <meta charset="utf8" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=8,9,10,11,edge" />
  <meta http-equiv="cache-control" content="no-cache,no-store,must-revalidate" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <meta name="renderer" content="webkit" />
  <meta name="mobileoptimized" content="0" />
  <link rel="stylesheet" href="./common/global.css" />
  <link rel="stylesheet" href="index.css" />
  <script type="text/javascript" src="./common/global.js"></script>
  <script type="text/javascript" src="./common/vue.js-2.6.14/vue.min.js"></script>
  <script type="text/javascript" src="./common/echarts-5.2.2/echarts.min.js"></script>

  <title>磨床生产看板</title>
</head>

<body>
  <div id="vue">
    <!-- 背景 -->
    <div class="wall" id="wall">
      <img src="bg.png" />
    </div>
    <div class="board" id="board">
      <!-- 头部 -->
      <div class="header">
        <div class="header-bg">
          <img src="header-bg.png" height="100px" />
        </div>
        <div class="header-txt" @click="fullscreen">
          德林生产综合看板
        </div>
        <div class="time">
          {{datetime}}
        </div>
        <div class="line-info">
          德林三车间磨床
        </div>
      </div>

      <div class="device-params">
        <div class="device-params-header">
          <img src="device-params-header.png" width="1872px" height="40px" />
        </div>
        <div class="device-params-header-title">
          生产实时数据
        </div>

        <table class="table-header" border="0" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>设备号</th>
            <th>设备状态</th>
            <th>00H</th>
            <th>01H</th>
            <th>02H</th>
            <th>03H</th>
            <th>04H</th>
            <th>05H</th>
            <th>06H</th>
            <th>07H</th>
            <th>08H</th>
            <th>09H</th>
            <th>10H</th>
            <th>11H</th>
            <th>12H</th>
            <th>13H</th>
            <th>14H</th>
            <th>15H</th>
            <th>16H</th>
            <th>17H</th>
            <th>18H</th>
            <th>19H</th>
            <th>20H</th>
            <th>21H</th>
            <th>22H</th>
            <th>23H</th>
          </tr>
        </table>
        <div class="table-colums">
          <table class="table-row" border="0" cellspacing="0">
            <tr v-for="item in welderDatas">
              <td>{{item.index}}</td>
              <td>{{item.equipmentCode}}</td>
              <td>运行</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>{{item.manualFluxTempSet}}</td>
              <td>1234</td>
          </table>
        </div>
      </div>
    </div>

  </div>
  <script src="./index.js"></script>
  <script src="./utils.js"></script>
  <script>
    function adjust() {
      var board = document.getElementById('board')
      var vue = window.vue
      if (!board || !vue) return setTimeout(adjust, 100)
      var width = window.innerWidth + 0.0
      var height = window.innerHeight + 0.0
      var scale = width / height > 1920.0 / 1080.0 ? height / 1080.0 : width / 1920.0
      board.style.transform = 'scale(' + String(scale) + ')'
    }


    window.onload = function () {
      window.vue = new Vue({
        el: '#vue',
        data: {
          // 生产数据
          welderDatas: [],
          periodTimer: null,
          datetime: '2023-12-22 12:11:11',
          isSim: true, // 是否模拟演示
        },
        computed: {},
        watch: {},
        created() {
          var _this = this;
          this.$nextTick(() => {
            let count = 0;
            this.periodTimer = setInterval(async () => {
              if (count++ % 5 == 0) {
                await _this.refresh()
              }
              _this.datetime = now().now
            }, 1000);

            setTimeout(() => {
              scrollTable('.table-row', 2, 1, 5, 32)
            }, 500);
          });

        },
        destroyed() {
          clearInterval(this.periodTimer);
        },
        methods: {

          fullscreen() {
            let element = document.getElementById("vue");
            console.log(element);
            if (element.requestFullscreen) {
              element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { // Firefox
              element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { // Chrome, Safari和Opera
              element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { // IE/Edge
              element.msRequestFullscreen();
            }
          },

          async refresh() {

            // 获取串焊机Api数据
            if (!this.isSim) {


            }
            else {
              /******************************************
              *  模拟数据
              */
              this.welderStatus = [];
              this.welderDatas = [];

              for (let index = 0; index < 28; index++) {
                var ok = Math.round(1500 + Math.random() * 100);
                var ng = Math.round(150 + Math.random() * 10);

                this.welderDatas.push({
                  index: index + 1,
                  equipmentCode: 'delin' + ':' + (index + 1),
                  manualFluxTempSet: 40 + index % 3,
                  preheatBasePlateTempSet: 90 + index % 3,
                  complexBorderTempSet: 90 + index % 3,
                  solderBasePlateSet: 110 + index % 3,
                  holdingBasePlatSet1: 90 + index % 3,
                  holdingBasePlatSet2: 85 + index % 3,
                  holdingBasePlatSet3: 90 + index % 3,
                  lampPowerSet1: 58 + index % 3,
                  lampPowerSet2: 65 + index % 3,
                })

              }
            }
          }
        },
      });
      // 尺寸变化的事件
      window.onresize = adjust;
      adjust();
      vue.refresh();
      // setTimeout(() => vue.refresh(), 10000);
    }
  </script>
</body>

</html>